<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <div ng-controller="Ctrl">
            <h2>控制器一</h2>
            <button ng-click="add()">添加数据到服务中</button>
            <ul>
                <li ng-repeat="item in data track by $index">{{ item }}</li>
            </ul>
        </div>
        <hr>
        <div ng-controller="Ctrl2">
            <h2>控制器二</h2>
            <button ng-click="reduce()">减少服务中的数据</button>
            <ul>
                <li ng-repeat="item in data track by $index">{{ item }}</li>
            </ul>
        </div>

    </body>
    <script type="text/javascript">

        angular.module('App', [])

        // 工具工厂
        // 返回值是一个对象，对象中包括一些公用的方法
        .factory('MathFactory', function (DataService) {
            console.log('factory');
            return {
                min: function (a, b) {
                    return a < b ? a : b;
                },
                max: function (a, b) {
                    return a > b ? a : b
                },
                allPrice: function () {
                    var a = 0;
                    DataService.arr.map(function (item) {
                        a += item;
                    });
                    return a;
                }
            };
        })

        // 数据服务
        .service('DataService', function () {
            this.arr = [1, 2, 3];
            console.log('service');
        })

        // value写法，用于定义全局变量
        .value('goodsCount', 0)

        // constant写法，用于声明全局变量，静态常量
        .constant('BAIDUMAPKEY', 'cptbtptpbcptdtptp')

        .controller('Ctrl', ['$scope', 'DataService', 'MathFactory', 'goodsCount', 'BAIDUMAPKEY', function ($scope, DataService, MathFactory, goodsCount, BAIDUMAPKEY) {
            console.log('ctrl');
            // 获取服务中的数据，放到$scope上面，为了在页面显示
            $scope.data = DataService.arr;
            // 单击按钮时，添加数据到服务中，$scope中对应的数据会自动发生改变
            $scope.add = function () {
                DataService.arr.push(123);
            };

            // 使用工厂提供的方法
            console.log(MathFactory.min(10, 20));
            // 使用value提供的数据
            console.log(goodsCount);
            console.log(BAIDUMAPKEY);
        }])

        .controller('Ctrl2', ['$scope', 'DataService', 'yztc', function ($scope, DataService, yztc) {
            console.log('ctrl2');
            $scope.data = DataService.arr;

            $scope.reduce = function () {
                DataService.arr.pop();
            };

            // 对于provider提供的方法或属性，在控制器中，可以直接写名称进行使用
            // 注意：名称代表的是this.$get()这个函数的返回值
            // provider对外提供的数据或方法，在使用时候，名称不同，得到的数据和方法也不同
            console.log(yztc('abc'));
        }])


        .provider('yztc', function () {
            // 内部声明局部变量
            var company = 'Google';
            // 添加方法
            this.setCompany = function (newCompany) {
                company = newCompany
            };

            this.$get = function () {
                return function (a) {
                    return company + ' ' + a;
                };
            };
        })

        // provider可以被注入到config中，但是名称后面需要添加Provider
        .config(function (yztcProvider) {
            console.log('config');
            console.log(yztcProvider);
        })


        // 当有数据需要共享的时候，建议使用service，创建成服务
        // 某个控制器需要使用的时候，使用注入的方式添加进去
        // 控制器内部，正常访问数据即可
        // service后面的函数是构造函数，会自动创建，所以内部添加属性或方法直接使用this


        function test() {
            console.log(this);
        }

        // test(); // window
        // window.test();

        function Person(name) {
            this.name = name;
            console.log(this);

            this.abc = 134;
            this.def = function () {

            };
        }

        // Person('abc');

        // var p = new Person('abc');




    </script>
</html>
